<template>
  <div class="box">
    <header>
      <div>
        <van-nav-bar
          class="back"
          left-text="搜索"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
    </header>
    <section>
      <van-search
        v-model="value"
        show-action
        label="地址"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" class="ser">搜索</div>
        </template>
      </van-search>
    </section>
    <section>
      <h4>历史搜索</h4>
      <section>
        <div class="find" v-for="(item, index) in list" :key="index">
          <span>{{ item }}</span>
        </div>
      </section>
    </section>
    <section>
      <h4>搜索发现</h4>
      <div class="find">
        <span>麻辣烫</span>
        <span>米线</span>
        <span>匹萨</span>
        <span>蛋糕</span>
        <span>汉堡</span>
        <span>烧烤</span>
        <span>烤肉拌饭</span>
        <span>炸鸡</span>
        <span>味多美</span>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "Ser",
  data() {
    return {
      value: "",
      text: "",
      list: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch(val) {
      Toast(val);
    },
    search() {
      console.log(this.text);
      this.list.unshift(this.text);
      this.text = "";
    },
  },
};
</script>

<style lang="css" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 0 15px;
  box-sizing: border-box;
}
header {
  min-height: 3.5rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
}
header .back {
  text-align: left;
  font-size: 14px;
  color: rgb(52, 184, 236);
}
.ser {
  color: rgb(11, 96, 223);
}
.find {
  /* width: 100%; */
  margin-right: 10px;
  min-height: 50px;
}
.find span {
  padding: 0 10px;
  display: inline-block;
  margin: 10px 0;
  height: 30px;
  line-height: 30px;
  background-color: rgb(231, 231, 231);
  font-size: 16px;
}
</style>